<template>
  <van-search
    v-model="inputValue"
    class="van-search-input"
    :left-icon="leftIcon"
    :placeholder="placeholder"
    clearable
    @input="onInput"
    @change="$emit('change')"
  />
</template>

<script>
export default {
  name: 'SearchInput',

  model: {
    prop: 'value',
    event: 'input',
  },

  props: {
    value: {
      type: [String, Number, Array, Object, Date],
      default: () => '',
    },
    placeholder: {
      type: String,
      default: () => '请输入工单名称',
    },
    leftIcon: {
      type: String,
      default: () => 'search',
    },
  },

  data () {
    return {
      inputValue: '',
    }
  },

  watch: {
    value: {
      immediate: true,
      handler (val) {
        this.inputValue = val
      },
    },
  },

  methods: {
    // event taggle
    toggleEvent (evt, val) {
      this.$emit(evt, val)
    },

    // input
    onInput (val) {
      this.toggleEvent('input', val)
    },
  },
}
</script>

<style lang="scss">
.van-search-input {
  border: 1px solid #ebedf0;
  border-radius: $b-radius-md;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #F8F8F8!important;
  .van-field__body {
    border-top: 1px solid transparent;
  }
  .van-search__content {
    background-color: #F8F8F8!important;
  }
}
</style>
